<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="158px">

      <el-form-item :label="$t('businessLog.reqIp')" prop="reqIp">
        <el-input v-model="temp.reqIp" :placeholder="$t('businessLog.pickReqIp')" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.reqUrl')" prop="reqUrl">
        <el-input v-model="temp.reqUrl" :placeholder="$t('businessLog.pickReqUrl')" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.reqMethod')" prop="reqMethod">
        <el-input v-model="temp.reqMethod" :placeholder="$t('businessLog.pickReqMethod')" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item label="请求时间" prop="reqDate">
        <el-input v-model="temp.createDate" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly placeholder="请输入请求时间" />
      </el-form-item>

      <el-form-item :label="$t('businessLog.reqParams')" prop="reqParams">
        <el-input v-model="temp.reqParams" :placeholder="$t('businessLog.pickReqParams')" size="small" autosize type="textarea" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.userId')" prop="userId">
        <el-input v-model="temp.userId" :placeholder="$t('businessLog.pickUserId')" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.userType')" prop="userType">
        <el-input v-model="temp.userType" :placeholder="$t('businessLog.pickUserType')" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.description')" prop="description">
        <el-input v-model="temp.description" :placeholder="$t('businessLog.pickDescription')" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.exceptionCode')" prop="exceptionCode">
        <el-input v-model="temp.exceptionCode" :placeholder="$t('businessLog.pickExceptionCode')" style="width:310px;" size="small" type="text" prefix-icon="el-icon-edit" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.diyParams')" prop="diyParams">
        <el-input v-model="temp.diyParams" :placeholder="$t('businessLog.pickDiyParams')" autosize type="textarea" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.exceptionStackTrace')" prop="exceptionStackTrace">
        <el-input v-model="temp.exceptionStackTrace" :placeholder="$t('businessLog.pickExceptionStackTrace')" autosize type="textarea" readonly />
      </el-form-item>

      <el-form-item :label="$t('businessLog.exceptionMessage')" prop="exceptionMessage">
        <el-input v-model="temp.exceptionMessage" :placeholder="$t('businessLog.pickExceptionMessage')" autosize type="textarea" readonly />
      </el-form-item>

      <div class="dialog-footer">
        <el-row>
          <el-col :span="8">
            <el-form-item label="状态" prop="exceptionMessage">
              <findDictionary type-code="GeneralEnum_ExceptionMark" :selected-val="selectedVal" @getDictionaryId="getDictionaryData" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { bus } from '../../../../bus'
import { viewSystemLog, systemExceptionLogExceptionMark } from '@/api/system'
import { codeValidation } from '@/methods/codeValidation'

export default {
  name: 'Detail',
  props: {
    // bus 前缀
    busNamePrefix: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      yes: true,
      no: false,
      selectedVal: '',

      temp: {
        id: '',
        diyParams: '',
        reqIp: '',
        reqUrl: '',
        reqMethod: '',
        createDate: '',
        reqParams: '',
        userId: '',
        userType: '',
        description: '',
        exceptionStackTrace: '',
        exceptionCode: '',
        exceptionMessage: ''
      },
      options: [],
      rules: {},

      query: {}
    }
  },
  created() {
    this.busWatch()
  },
  methods: {

    getDictionaryData(data) {
      var self = this
      var temp = {
        id: this.query.id,
        exceptionMark: data.code
      }
      systemExceptionLogExceptionMark(temp).then(response => {
        var code = response.data.code
        var content = response.data.content
        if (code == '0000') {
          codeValidation(code, content, self)
        } else {
          codeValidation(code, content, self)
        }
      })
    },

    // bus 事件监听 方法集合
    busWatch() {
      var self = this
      // 监听列表查看详情按钮是否点击 ==> 根据ID查询数据
      bus.$on(`${this.busNamePrefix}ViewDetail`, (data) => {
        if (self.Util.isObjEmpty(data)) {
          self.query = data
          self.viewDetail(data)
        }
      })
    },

    // 查询详情方法
    viewDetail(data) {
      var ids = {
        id: data.id
      }
      viewSystemLog(ids).then(response => {
        this.selectedVal = response.data.systemExceptionLog.exceptionMark
        this.temp = Object.assign({}, response.data.systemExceptionLog) // copy obj
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .detail-container {
    position: absolute;
    left: 0;
    right: 0;
    width: 1080px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  }

  .standard-margin {
    margin-top: 15px;
  }
  .form-border {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
  }

  .form-container-border {
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    margin-top: 15px;
  }

  .form-left-bg {
    background: #F2F6FC;
  }

  .font-small {
    font-size: 14px;
    color: #606266;
  }
</style>
